<!--
    已激活案件列表 弹窗 公共插件

    参数：
    modal       弹窗开关
    isSP        是否是经销商
    modalTitle  弹窗title
    getDataFn   Api
    dataDict    数据字典

    方法:
    showContractDetial  进入详情页
    closeModal          关闭弹窗
 -->
<template>
    <Modal
        :title="modalTitle"
        v-model="isModalOpen"
        :mask-closable="false"
        :width="950"
        :styles="{top: '30px'}"
        @on-visible-change="changeModalState"
    >
        <div class="revokeCase">
            <Form ref="formValidate" :model="formValidate" :label-width="100">
                <Row>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="申请编号" prop="applyNo">
                            <Input clearable v-model="formValidate.applyNo" placeholder/>
                        </FormItem>
                    </Col>

                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8">
                        <FormItem label="客户姓名" prop="custName">
                            <Input clearable v-model="formValidate.custName" placeholder/>
                        </FormItem>
                    </Col>
                    <Col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" :xxl="8" v-if="!isSP">
                        <FormItem label="合同号" prop="contractNo">
                            <Input clearable v-model="formValidate.contractNo" placeholder/>
                        </FormItem>
                    </Col>

                    <Col span="24">
                        <div class="text-center contract-close-btns">
                            <Button type="primary" @click="handleSubmit('formValidate')" icon="ios-search"
                                    style="margin-right:16px">搜索
                            </Button>
                            <Button type="primary" @click="handleReset('formValidate')" icon="ios-trash-outline">重置
                            </Button>
                        </div>
                    </Col>
                </Row>
            </Form>
            <div class="new-apply-table">
                <Row>
                    <Col span="24">
                        <Table
                            width="100%"
                            maxHeight="300"
                            :columns="contractTableHead"
                            :data="contractTable.records"
                            :loading="loading"
                            @on-row-dblclick="dblclickShowDetial"
                        >
                            <!-- 付款方式 -->
                            <template slot-scope="{ row, index }" slot="sourceType">
                                <span>{{getTitle('receiptSourceType',row.sourceType)}}</span>
                            </template>
                            <!-- 处理方式-->
                            <template slot-scope="{ row, index }" slot="treatmentMethod">
                                <div v-if="row.treatmentMethod === 'INCOME'">收入</div>
                                <div v-else-if="row.treatmentMethod === 'REFUND'">退款</div>
                            </template>
                            <!-- 状态 -->
                            <template slot-scope="{ row, index }" slot="processStatus">
                                <span>{{getTitle('processStatus',row.processStatus)}}</span>
                            </template>
                        </Table>
                    </Col>
                    <Col span="24">
                        <Row type="flex" justify="end" class="table-page">
                            <Page
                                :current="contractTable.current"
                                :transfer="true"
                                :total="contractTable.total"
                                :page-size="contractTable.pageSize"
                                @on-change="changePage"
                                @on-page-size-change="changePageSize"
                                :page-size-opts="pageSizeOpts"
                                size="small"
                                show-total
                                show-elevator
                                show-sizer
                            ></Page>
                        </Row>
                    </Col>
                </Row>
            </div>
        </div>
        <div slot="footer"></div>
    </Modal>
</template>

<script>
    import {
        isPhoneValiate,
        doValidID,
        isNameValiate, getTitleFromDataDict
    } from "_p/basic/assets/contract/js/utils";
    import {
        getRevokeHandleList,
    } from "_p/basic/api/contract/revoke/revoke-handle";
    import {
        findByContractNo
    } from "_p/basic/api/contract/activated-case/index";
    import {getAlertTableData} from "_p/basic/api/contract/common/alert-table/alert-table";

    export default {
        // 已收款撤销成功案件列表 弹窗
        name: "revokeCase",
        components: {},
        props: {
            dataDict: {
                type: Object
            },
            contractBusiness: {
                type: Array
            },
            handleBusiness: {
                type: String,
                required: false
            },
            modal: {
                type: Boolean,
                required: true
            },
            isSP: {
                type: Boolean,
                required: true,
                default: true
            },
            modalTitle: {
                type: String,
                default: "已激活案件列表"
            },
            getDataFn: {
                type: Function,
                required: false
            },
        },
        data() {
            return {
                isModalOpen: this.modal,
                loading: false,
                formValidate: {
                    applyNo: "", // 申请编号
                    certNo: "", // 证件号码
                    contractNo: "", // 合同号
                    contractStatusEnum: "", // 合同状态
                    custName: "", // 客户名称
                    phone: "", //手机号码
                    pageNumber: 1, // integer($int32) // 当前页
                    pageSize: 10, //integer($int32) // 多少条
                    pageIndex: 0, //integer($int32) // 跳过多少条
                    pageTotal: 0
                },
                ruleInline: {
                    phone: [
                        {
                            required: false,
                            validator: isPhoneValiate,
                            trigger: "change"
                        }
                    ],
                    custName: [
                        {
                            required: false,
                            validator: isNameValiate,
                            trigger: "change"
                        }
                    ],
                    certNo: [
                        {required: false, validator: doValidID, trigger: "change"}
                    ]
                },
                // 日期区间
                isDateErr: false,

                contractTableHead: [
                   {
                        key: 'applyNo',
                        title: '申请编号',
                        minWidth: 120,
                        align: 'center'
                    },{
                        key: 'contractNo',
                        title: '合同号',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        key: 'custName',
                        title: '客户姓名',
                        minWidth: 120,
                        align: 'center'
                    },

                    {
                        title: "付款方式",
                        key: "sourceType",
                        minWidth: 120,
                        slot: "sourceType",
                    },
                    {
                        key: 'treatmentMethod',
                        title: '处理方式',
                        slot: 'treatmentMethod',
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        title: "收款日期",
                        key: "succeedTime",
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        title: "收款金额",
                        key: "arriveAmt",
                        minWidth: 120,
                        align: 'center'
                    },
                    {
                        key: 'startTime',
                        title: '申请时间',
                        minWidth: 120,
                        align: 'center',
                    }
                    , {
                        key: 'endTime',
                        title: '结束时间',
                        minWidth: 120,
                        align: 'center'
                    }, {
                        key: 'handleStatus',
                        title: '处理状态',
                        slot: 'processStatus',
                        minWidth: 120,
                        align: 'center'
                    },{
                        key: 'phone',
                        title: '联系方式',
                        minWidth: 120,
                        align: 'center'
                    }
                ],
                contractTable: {
                    current: 1,
                    pages: 0,
                    searchCount: false,
                    size: 10,
                    total: 0,
                    orders: [],
                    records: []
                },
                pageSizeOpts: [10, 20, 50, 100]
            };
        },
        watch: {
            modal: function (newVal) {
                if (newVal) {
                    this.isModalOpen = newVal;
                }
            }
        },
        methods: {
            getList(data) {
                data.total = this.contractTable.total
                getRevokeHandleList(data).then(res => {
                    console.log(res.data);
                    this.loading = false;
                    if (res.code === "0000") {
                        this.contractTable = res.data;

                    } else {
                        this.$Message.error("Fail!");
                    }
                });
            },
            // 提交搜索
            handleSubmit(name) {
                if (this.loading) return;
                this.$refs[name].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.getList(Object.assign({}, this.formValidate, {pageNumber: 1}));
                    }
                });
            },
            handleReset(name) {
                this.$refs[name].resetFields();
                this.handleSubmit(name);
            },
            // 分页

            changePageSize(num) {
                this.loading = true;
                this.getList(
                    Object.assign({}, this.formValidate, {pageSize: num})
                );
                this.formValidate.pageSize = num;
            },

            changePage(num) {
                this.loading = true;
                this.getList(
                    Object.assign({}, this.formValidate, {pageNumber: num})
                );

                this.formValidate.pageNumber = num;

            },
            // 跳转详情页
            dblclickShowDetial(row) {
                this.loading = true;
                let params = {
                    contractBusiness: this.contractBusiness,
                    contractNo: row.contractNo,
                    handleBusiness: this.handleBusiness,
                    isSP: this.isSP
                };
                let request;
                if (!this.isSP) {
                    request = 'contractManage';
                } else {
                    request = 'apply';
                }
                findByContractNo(params, request).then(res => {
                    if (res.code === "0000") {
                        this.showDetial(row);
                    }
                    this.loading = false;
                }).catch(e => {
                    this.loading = false;
                });
            },
            showDetial(row) {
                this.isModalOpen = false;
                this.$emit("showContractDetial", row);
            },
            //  弹窗切换
            changeModalState(bool) {
                if (!bool) this.$emit("closeModal");
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            }
        }
    };
</script>
<style scoped lang="less">
    .vertical-center-modal {
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal {
            top: 0;
        }
    }

    .ActivatedCase {
        .new-apply-table {
            padding-top: 18px;
        }

        .table-page {
            padding-top: 16px;
        }
    }

    .text-center {
        text-align: center;
    }
</style>
